<!DOCTYPE html>
<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="/css/amazeui.min.css">
    <link rel="stylesheet" href="/css/amazeui.cropper.css">
    <link rel="stylesheet" href="/css/custom_up_img.css">


    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/commone.css">
    <link rel="stylesheet" media="screen and (min-width:481px)" href="/css/usercenter.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="/css/usercenter(1).css">

    <script src="/js/hm.js"></script>
    <script type="text/javascript">
        var basePath = "/";
    </script>
    <script src="/js/common.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/footfixed.js"></script>
    <script src="/js/md5.js" type="text/javascript"></script>
    <script src="http://www.hasbei.com/static/layer/layer.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://www.hasbei.com/static/layer/theme/default/layer.css?v=3.1.1" id="layuicss-layer">


    <title>个人中心</title>


    <script src="/js/amazeui.min.js"></script>
    <script src="/js/cropper.min.js"></script>
    <script src="/js/custom_up_img.js"></script>
</head>
<body>
<div class="content">

    <div th:replace="common/hasbei_top_user"></div>


    <div class="content-main">
        <div class="main-info">

            <div th:replace="user/user_left"></div>


            <div class="main-user-right">

                <div class="user-info-editor">
                    <div class="editor-top">
                        <h2>个人信息</h2>
                        <a href="/user/solo" class="go-center"><span>返回个人中心主页</span><img
                                src="/icon/arrow-bttom.png" alt="有贝口腔网"></a>
                    </div>

                    <div class="change-info">
                        <div class="change-info-top">
                            <div class="change-info-defa">
                                <div class="defa-img"><a href="javascript:;"><img
                                        th:src="${user.imgpath}" alt="有贝口腔网"></a></div>
                                <div class="defa-text">
                                    <h3 class="h3-name" th:text="${user.name}">无言猪</h3>
                                    <p class="p-style" th:text="${user.introduce}">从小就幻想成为键盘侠，现在梦想已实现，来互喷吧现实生活平平淡淡，网络上我B重权出鸡</p>
                                </div>
                            </div>
                            <div class="change-info-btn">修改信息</div>
                        </div>

                        <div class="change-info-show" style="display: none;">
                            <div class="change-show-img">
                                <div class="up-img-cover" id="up-img-touch">
                                    <img class="am-circle" id="user-photo"
                                         th:src="${user.imgpath}">
                                    <span class="change-img-btn">更换头像</span>
                                </div>
                                <!--图片上传框弹框-->
                                <div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
                                    <div class="am-modal-dialog up-frame-parent up-frame-radius">
                                        <div class="am-modal-hd up-frame-header">
                                            <label>上传头像</label>
                                            <a href="javascript: void(0)" class="am-close am-close-spin"
                                               data-am-modal-close="">×</a>
                                        </div>
                                        <div class="am-modal-bd  up-frame-body">
                                            <div class="am-g am-fl">
                                                <div class="am-form-group am-form-file">
                                                    <div class="am-fl">
                                                        <button type="button"
                                                                class="am-btn am-btn-default am-btn-sm choose-img">
                                                            选择要上传的图片
                                                        </button>
                                                    </div>
                                                    <form enctype="multipart/form-data">
                                                        <input type="file" id="inputImage">
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="am-g am-fl">
                                                <div class="up-pre-before up-frame-radius">
                                                    <img alt="" src=""
                                                         id="image">
                                                </div>
                                                <div class="up-pre-after up-frame-radius">
                                                </div>
                                            </div>
                                            <div class="am-g am-fl">
                                                <div class="up-control-btns">
                                                    <span onclick="rotateimgleft()">左转</span>
                                                    <span onclick="rotateimgright()">右转</span>
                                                    <span id="up-btn-ok">提交</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="writer-area">
                                <div class="write-box">
                                    <p class="write-box-p">
                                        <input class="write-box-input" placeholder="输入你的昵称" maxlength="20" type="text"
                                               th:value="${user.name}">
                                        <span class="write-box-span"><i>0</i>/20</span>
                                    </p>
                                    <p class="weite-box-tip">2-20个汉字，请勿使用包含特殊符号或含有明显营销推广意图的媒体名</p>
                                </div>
                                <div class="write-box">
                                    <p class="write-box-p">
                                        <textarea class="write-box-textarea" placeholder="不要做懒人，给自己一个介绍吧"
                                                  maxlength="250"
                                                  type="text" th:text="${user.introduce}">从小就幻想成为键盘侠，现在梦想已实现，来互喷吧现实生活平平淡淡，网络上我B重权出鸡</textarea>
                                        <span class="write-box-right"><i>0</i>/250</span>
                                    </p>
                                    <p class="weite-box-tip">良好的简介内容更容易收获用户的关注。填写建议个人介绍，内容介绍</p>
                                </div>
                                <div class="sub-btn">
                                    <div class="anniu sure-btn">保存</div>
                                    <div class="anniu close-btn">取消</div>
                                </div>
                            </div>
                        </div>

                        <div class="login-other">
                            <div class="login-other-title">登录方式</div>
                            <div class="login-other-type">
                                <div class="login-other-list">
                                    <div>
                                        <span class="change-obj">绑定手机</span>
                                        <span class="change-obj-show" th:text="${user.iphone}">155***8293</span>
                                    </div>
                                    <div class="change-obj-btn" onclick="setPhone(this)">设置修改手机号</div>
                                </div>
                                <div class="login-other-list">
                                    <div>
                                        <span class="change-obj">修改邮箱</span>
                                        <span class="change-obj-show" th:text="${user.email}"></span>
                                    </div>
                                    <div class="change-obj-btn" onclick="setEmail(this)">设置修改邮箱</div>
                                </div>

                            </div>
                        </div>
                        <div class="login-other">
                            <div class="login-other-title">安全设置</div>
                            <div class="login-other-type">
                                <div class="login-other-list">
                                    <div>
                                        <span class="change-obj">密码设置</span>
                                        <span class="change-obj-show"></span>
                                    </div>
                                    <div class="change-obj-btn" onclick="setPwd(this)">设置登录密码</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>


    <div th:replace="common/hasbei_bottom"></div>


    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?4245936cbef31e434e2b387b56dfd7d8";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</div>

<!--修改手机号码-->
<div id="update-phone" style="display: none">
    <style>
        .change-modul{
            font-size: 14px;
            color: #333;
            margin: 20px;
        }
        .phone-p{
            display: flex;
            align-items: center;
            margin: 30px 0;
        }
        .phone-p-title{
            width: 80px;
            text-align: right;
            margin-right: 20px;
        }
        .text-tip{
            margin-left:20px;
            color:rgba(41,167,230,1);
        }
        .change-input{
            width: 300px;
            padding:8px 10px;
            box-sizing: border-box;
            outline: 0;
            border:1px solid rgba(41,167,230,1);
            border-radius: 5px;
        }
        .new-input{
            width: 414px;
            padding:8px 10px;
            box-sizing: border-box;
            outline: 0;
            border:1px solid rgba(41,167,230,1);
            border-radius: 5px;
        }
        .send-btn{
            margin-left: 20px;
            padding: 8px 0;
            width: 94px;
            border:0;
            outline: 0;
            background: rgba(41,167,230,1);
            color:#fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .check-btn{
            margin-left: 20px;
            padding: 8px 0;
            width: 94px;
            border:0;
            outline: 0;
            background: rgba(41,167,230,1);
            color:#fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .next-btn{
            float: right;
            padding: 8px 16px;
            border:0;
            outline: 0;
            background: rgba(41,167,230,1);
            background: #ccc;
            color:#fff;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 30px;
        }
        .subm-btn{
            float: right;
            padding: 8px 16px;
            border:0;
            outline: 0;
            background: rgba(41,167,230,1);
            background: #ccc;
            color:#fff;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 30px;
        }
    </style>
    <div class="change-modul">
        <div class="modul-div">
            <p class="phone-p">
                <span class="phone-p-title">原手机号</span>
                <span th:text="${user.iphone}">155***8293</span>
                <span class="text-tip"><a href="/about/leave" target="_blank">无法接收通知？去反馈</a></span>
            </p>
            <p class="phone-p">
                <span class="phone-p-title">手机验证码</span>
                <input class="change-input" type="text" placeholder="请输入短信验证码" id="code1">
                <button type="button" class="check-btn">发送验证码</button>
            </p>
            <button type="button" disabled="" class="next-btn">下一步</button>
        </div>

        <div class="next-step" style="display:none">
            <p class="phone-p">
                <span class="phone-p-title">新手机号</span>
                <input class="new-input" type="text" placeholder="请输入新手机号">
            </p>
            <p class="phone-p">
            <span class="phone-p-title">验证码</span>
            <input class="change-input" type="text" placeholder="请输入短信验证码" id="code2">
            <button type="button" class="send-btn">发送验证码</button>
        </p>
            <button type="button" class="subm-btn">提交</button>
        </div>
    </div>
    <script>
        $(function(){
            // $(".next-step").hide();

            //第一步，发送验证码
            $(".check-btn").click(function(){
                var clickObj=this;
                daojishi(3,clickObj);

                //调用服务器发送验证码接口
                $.post(basePath+"user/center/update/sendCode/email",function(datas){
                    if(datas.success){
                        daojishi(90,clickObj);
                    }else{
                        layer.msg(datas.msg);
                    }
                });
            })
            //点击下一步
            $(".next-btn").click(function(){
                var checkcode = $("#code1").val();
                if(checkcode == ''){
                    layer.msg("请输入验证码！");
                    return false;
                }
                // 校验验证码接口
                $.post(basePath+"user/center/update/confirm/email?userName=xx&code="+checkcode,function(datas){
                    if(datas.success){
                        $(".modul-div").hide();
                        $(".next-step").show();
                    }else{
                        layer.msg(datas.msg);
                    }
                });
            });

            //最后一步验证码
            $(".send-btn").click(function(){
                var  userName=$("#new-input-email").val();
                if(isNotEmail(userName)){
                    layer.msg("请输入正确的邮箱");
                    return false;
                }
                var clickObj=this;
                $.post(basePath+"user/center/update/news_sendCode/email?userName="+userName+"&code=",function(datas){
                    if(datas.success){
                        layer.msg(datas.msg);
                        daojishi(90,clickObj);
                        changeSubmitButStatus();//改变提交按钮状态，颜色
                    }else{
                        layer.msg(datas.msg);
                    }
                });
            })
            //最后一步提交//设置设置新密码
            changeSubmitButStatus();
            $(".subm-btn").click(function(){
                var pwd2 = $("#pwd2").val();//确认密码
                var  pwd=$("#pwd").val();//密码1
                var pwdOld=$("#pwdOld").val();//旧密码
                if(undefined!=pwdOld&&isBlank(pwdOld)){
                    layer.msg("请输入旧密码");
                    return false;
                }
                if(isBlank(pwd)||pwd.length<6){
                    layer.msg("新密码不能为空且不能小于6位长度");
                    return false;
                }
                if(pwd2!=pwd){
                    layer.msg("确认新密码错误！");
                    return false;
                }
                pwd=MD5(pwd);
                if(undefined!=pwdOld){
                    pwdOld=MD5(pwdOld);
                }

                $.post(basePath+"user/updatePass?password="+pwd+"&pwdOld="+pwdOld,function(datas){
                    if(datas=='ok'){
                        layer.msg("修改成功");
                        setTimeout(function(){
                            layer.closeAll(); //疯狂模式，关闭所有层
                            location.reload();
                        },1500)
                    }else{
                        $(".new-input").val("");
                        layer.msg("修改失败，旧密码错误");
                    }
                });
            })

            //设置提交按钮颜色
            function changeSubmitButStatus(){
                $(".subm-btn").css("background-color","#1482C8");
            }
            function daojishi(seconds,obj){

                if (seconds > 1){
                    $(obj).css("background-color","#ccc");

                    $(".next-btn").attr("disabled", false).css("background-color","#1482C8");
                    seconds--;
                    $(obj).text(seconds+"s后重新发送").attr("disabled", true);//禁用按钮
                    // 定时1秒调用一次
                    setTimeout(function(){
                        daojishi(seconds,obj);
                    },1000);
                }else{
                    $(obj).css("background-color","#1482C8");
                    $(obj).text("发送验证码").attr("disabled", false);//启用按钮
                    $(".next-btn").attr("disabled", true).css("background-color","#ccc");
                }
            }


        })
    </script>
</div>

<!--修改邮箱-->
<div id="update-email" style="display: none">

    <div class="change-modul">

        <div class="next-step">
            <p class="phone-p">
                <span class="phone-p-title">新邮箱账号</span>
                <input class="new-input" id="new-input-email" type="text" placeholder="请输入新邮箱">
            </p>
            <p class="phone-p">
                <span class="phone-p-title">验证码</span>
                <input class="change-input" type="text" placeholder="请输入验证码" id="code2">
                <button type="button" class="send-btn">发送验证码</button>
            </p>
            <button type="button" style="float: right;" class="send-btn">提交</button>
        </div>
    </div>

</div>

<!--修改密码-->
<div id="update-pass" style="display: none">
    <div class="change-modul">
        <div class="next-step">
            <p class="phone-p">
                <span class="phone-p-title">输入旧密码</span>
                <input class="new-input" type="password" placeholder="输入旧密码" id="pwdOld">
            </p>
            <p class="phone-p">
                <span class="phone-p-title">输入新密码</span>
                <input class="new-input" type="password" placeholder="输入新密码" id="pwd">
            </p>
            <p class="phone-p">
                <span class="phone-p-title">确认新密码</span>
                <input class="new-input" type="password" placeholder="确认新密码" id="pwd2">


            </p>
            <button type="button" class="subm-btn" style="background-color: rgb(20, 130, 200);">提交</button>
        </div>
    </div>

</div>

<script>




    $(".change-info-show").hide();
    $(".change-info-btn").click(function () {
        $(".change-info-top").hide();
        $(".change-info-show").show();
    })
    $(".write-box-input").change(function () {
        var inputle = $(this).val().length;
        $(".write-box-span i").text(inputle);
    })
    $(".write-box-textarea").change(function () {
        var textareale = $(this).val().length;
        $(".write-box-right i").text(textareale);
    })
    $(".write-box-input").focus(function () {
        $(this).parent().css("border-color", "rgba(41,167,230,1)");
    })
    $(".write-box-input").blur(function () {
        $(this).parent().css("border-color", "#ddd");
    })
    $(".write-box-textarea").focus(function () {
        $(this).parent().css("border-color", "rgba(41,167,230,1)");
    })
    $(".write-box-textarea").blur(function () {
        $(this).parent().css("border-color", "#ddd");
    })


    $(".sure-btn").click(function () {
        var inputval = $(".write-box-input").val();
        var textareaval = $(".write-box-textarea").val();
        if (inputval == "") {
            layer.msg("请输入昵称");
            return false;
        }
        $(".h3-name").text(inputval);
        $(".p-style").text(textareaval);
        //更新用户信息
        updateUserInfo(inputval, textareaval);
    })
    $(".close-btn").click(function () {
        $(".change-info-show").hide();
        $(".change-info-top").show();
    })


    // 修改手机号/邮箱
    function setPhone(obj) {
        layer.open({
            content: $('#update-phone'),
            type: 1,
            title: "设置手机号码",
            shadeClose: false,
            area: ['600px', '250px'],
            fixed: false,
            maxmin: false,

        });

    }

    function setEmail(obj) {
        layer.open({
            content: $("#update-email"),
            type: 1,
            title: "设置电子邮箱",
            shadeClose: false,
            area: ['600px', '250px'],
            fixed: false,
            maxmin: false,

        });
    }

    function setPwd(obj) {
        layer.open({
            type: 1,
            title: "设置登录密码",
            shadeClose: false,
            area: ['600px', '310px'],
            fixed: false,
            maxmin: false,
            content: $("#update-pass")
        });
    }

    //更新用户信息
    var logo = "";

    function updateUserInfo(nick, desc) {
        $.post(basePath + "user/update?name=" + nick + "&introduce=" + desc + "&logo=" + logo, function (data) {
            if (data==0) {
                layer.msg("保存成功");
                $(".change-info-show").hide();
                $(".change-info-top").show();
                location.reload();
            } else {
                layer.msg('保存失败');
            }
        });
    }


    $(function () {//绑定上传头像事件,上传头像
        $('#up-btn-ok').on('click', function () {

            //var $modal = $('#my-modal-loading');
            //var $modal_alert = $('#my-alert');
            var $modal = $('#doc-modal-1');
            var img_src = $image.attr("src");
            if (img_src == "") {

                //set_alert_info("没有选择上传的图片");
                 //$modal_alert.modal();
                layer.msg("没有选择上传的图片")

                return false;
            }

             // $modal.modal();
             // var index = layer.load(1, {
             //     shade: [0.5,'#fff'] //0.1透明度的白色背景
             // });

            var url = basePath + 'userImg?t=' + new Date().getTime();
            var canvas = $("#image").cropper('getCroppedCanvas');
            var data = canvas.toDataURL(); //转成base64
            var params = {};
            params["upfile"] = data.toString();
            $.post({
                url:url,
                dataType:'json',
               //timeout : 10, //超时时间设置，单位毫秒
                data: params,
                success: function (data, textStatus) {
                   // $modal.modal('close');
                   // set_alert_info(data.result);
                    //$modal_alert.modal();

                    console.log(data)
                    if (data!='no'||data!='') {
                       // logo = data.data;
                        console.log(data)
                        $("#up-img-touch img").attr("src", data);
                        layer.msg("上传头像成功");
                        // var img_name=data.file.split('/')[2];
                        // console.log(img_name);
                        // $("#pic").text(img_name);
                        $modal.modal('close');//关闭弹窗
                    } else {
                        layer.msg("上传失败！");
                        $modal.modal('close');//关闭弹窗
                    }
                },
                error: function (data) {
                    console.log(data.responseText)
                    if(data.responseText=='no'){
                        layer.msg("上传头像失败！请稍后重试");
                        return false;
                    }
                    $("#up-img-touch img").attr("src", data.responseText);
                    $("#mysoloImg").attr("src",data.responseText);
                    $("#topuserImg").attr("src",data.responseText);
                    layer.msg("上传头像成功");
                    $modal.modal('close');//关闭弹窗
                }
            });

        });

    });



</script>


</body>
</html>